<template>
  <div>选择课题：</div>
  <div class="table-box">
    <vxe-table
      ref="tableRef"
      :data="tableData"
      :edit-config="{ trigger: 'click' }"
    >
      <vxe-column
        field="id"
        title="课题编号"
        :width="150"
        :edit-render="{ placeholder: '请选择' }"
      >
        <template #edit="{ row }">
          <el-select-v2
            v-model="row.id"
            filterable
            :options="options"
            :props="selectOptions"
            placeholder="请选择"
            @change="handleChange($event, row)"
          />
        </template>
      </vxe-column>
      <vxe-column field="name" title="课题名称" />
      <vxe-column field="leader" title="课题负责人" />
      <vxe-column field="type" title="课题类型">
        <template #default="{ row }">
          <span>
            {{ dictStore.getDictLabelForValue('topic_type', row.type) }}
          </span>
        </template>
      </vxe-column>
      <vxe-column field="subjectAreaText" title="专业领域" />
      <vxe-column
        field="researchStartDate"
        title="研究开始时间"
        :formatter="['formatDate', 'yyyy-MM-dd HH:mm:ss']"
      />
      <vxe-column
        field="researchEndDate"
        title="研究结束时间"
        :formatter="['formatDate', 'yyyy-MM-dd HH:mm:ss']"
      />
      <vxe-column field="estimatedBudget" title="预计投入经费(万元)" />
      <vxe-column field="externalCooperationRequired" title="是否需要外协">
        <template #default="{ row }">
          <span>
            {{
              dictStore.getDictLabelForValue(
                'yes_no',
                row.externalCooperationRequired
              )
            }}
          </span>
        </template>
      </vxe-column>
      <vxe-column field="leadingUnitName" title="承担单位" />
      <vxe-column field="collaboratingUnitNames" title="协作单位" />
      <vxe-column title="操作">
        <template #default="{ row }">
          <el-link @click="handleDelete(row)">删除</el-link>
        </template>
      </vxe-column>
    </vxe-table>
  </div>
  <el-button
    style="margin-top: 20px"
    type="primary"
    :icon="Plus"
    @click="insertEvent"
  >
    增加课题
  </el-button>
</template>

<script setup>
  import { Plus } from '@element-plus/icons-vue'
  import { useDictStore } from '@/store/modules/dict'
  import { selectTopicList, queryTopicAndProject } from '@/api/project/index'

  const props = defineProps({
    type: {
      type: Number,
      default: 1,
    },
  })

  const dictStore = useDictStore()

  const tableRef = ref()
  const tableData = ref([])
  const selectRow = ref({})

  const options = ref([])
  const selectOptions = {
    label: 'topicName',
    value: 'topicId',
  }

  const getTopic = () => {
    selectTopicList({ type: props.type }).then((res) => {
      if (res.code == 0 || res.code == 200) {
        options.value = res.data || []
      }
    })
  }

  const handleChange = (value, row) => {
    selectRow.value = row
    queryTopicAndProject({ topicId: value }).then((res) => {
      if (res.code == 0 || res.code == 200) {
        const topicData = res.data.topicRespVO
        Object.assign(selectRow.value, topicData)
      }
    })
  }

  const insertEvent = async () => {
    const $table = tableRef.value
    if ($table) {
      const record = {}
      $table.insertAt(record, -1)
    }
  }

  const handleDelete = (row) => {
    const $table = tableRef.value
    if ($table) {
      $table.remove(row)
    }
  }

  const getTableData = () => {
    return tableRef.value.getTableData().tableData
  }

  getTopic()

  defineExpose({ tableData: tableData, getTableData })
</script>

<style lang="scss" scoped>
  .table-box {
    margin-top: 20px;
  }
</style>
